<template>
    <div id="app">
        <!--<div>-->
        <!--<el-menu-->
        <!--:default-active="activeIndex"-->
        <!--class="el-menu-demo"-->
        <!--mode="horizontal"-->
        <!--@select="handleSelect">-->
        <!--<template v-for="data in menuList">-->
        <!--<el-menu-item v-if="data.childSysMenu.length == 0" :index="String(data.menu_id)">{{data.name}}</el-menu-item>-->
        <!--<template v-if="data.childSysMenu.length > 0">-->
        <!--<el-menu-item  :index="String(data.menu_id)">{{data.name}}</el-menu-item>-->
        <!--<el-submenu :index="String(item.menu_id)" v-for="item in data.childSysMenu">{{item.name}}</el-submenu>-->
        <!--</template>-->
        <!--</template>-->
        <!--&lt;!&ndash;<el-menu-item index="1">首页</el-menu-item>&ndash;&gt;-->
        <!--&lt;!&ndash;<el-submenu index="2">&ndash;&gt;-->
        <!--&lt;!&ndash;<template slot="title">主题展厅</template>&ndash;&gt;-->
        <!--&lt;!&ndash;&lt;!&ndash;分类可自动生成&ndash;&gt;&ndash;&gt;-->
        <!--&lt;!&ndash;<el-menu-item index="2-1" @click="skip('about')">国画</el-menu-item>&ndash;&gt;-->
        <!--&lt;!&ndash;<el-menu-item index="2-2">油画</el-menu-item>&ndash;&gt;-->
        <!--&lt;!&ndash;<el-menu-item index="2-3">水彩</el-menu-item>&ndash;&gt;-->
        <!--&lt;!&ndash;<el-submenu index="2-4">&ndash;&gt;-->
        <!--&lt;!&ndash;<template slot="title">其他</template>&ndash;&gt;-->
        <!--&lt;!&ndash;<el-menu-item index="2-4-1">人物画</el-menu-item>&ndash;&gt;-->
        <!--&lt;!&ndash;<el-menu-item index="2-4-2">风景画</el-menu-item>&ndash;&gt;-->
        <!--&lt;!&ndash;<el-menu-item index="2-4-3">动物画</el-menu-item>&ndash;&gt;-->
        <!--&lt;!&ndash;</el-submenu>&ndash;&gt;-->
        <!--&lt;!&ndash;</el-submenu>&ndash;&gt;-->
        <!--&lt;!&ndash;<el-menu-item index="3">消息中心</el-menu-item>&ndash;&gt;-->
        <!--&lt;!&ndash;<el-submenu index="4">&ndash;&gt;-->
        <!--&lt;!&ndash;<template slot="title">关于我们</template>&ndash;&gt;-->
        <!--&lt;!&ndash;<el-menu-item index="4-1">联系我们</el-menu-item>&ndash;&gt;-->
        <!--&lt;!&ndash;<el-menu-item index="4-2">意见反馈</el-menu-item>&ndash;&gt;-->
        <!--&lt;!&ndash;</el-submenu>&ndash;&gt;-->

        <!--<div v-if="isLogin" class="block nav_right" :key="size">-->
        <!--<el-tag style="margin-right: 10px">欢迎{{userInfo.ro_name}}登录</el-tag>-->
        <!--&lt;!&ndash;此处显示头像，下拉框，上传头像、设置、-->
        <!--判断如果是画家角色-则有上传作品、查看自己的作品(查看打赏记录、粉丝等)&ndash;&gt;-->
        <!--<el-dropdown trigger="click">-->
        <!--<el-avatar :size="size" icon="el-icon-user" class="el-dropdown-link">-->
        <!--<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
        <!--</el-avatar>-->
        <!--<el-dropdown-menu slot="dropdown">-->
        <!--<el-dropdown-item><i class="el-icon-user"></i>个人中心</el-dropdown-item>-->
        <!--<el-dropdown-item divided>修改密码</el-dropdown-item>-->
        <!--<el-dropdown-item v-if='userInfo.ro_name== "管理员"'>用户角色管理</el-dropdown-item>-->
        <!--<el-dropdown-item v-if='userInfo.ro_name== "管理员"'>作品审核</el-dropdown-item>-->
        <!--<el-dropdown-item v-if='userInfo.ro_name== "管理员"'>发布公告</el-dropdown-item>-->
        <!--<el-dropdown-item v-if='userInfo.ro_name== "画家"'>我的作品</el-dropdown-item>-->
        <!--<el-dropdown-item v-if='userInfo.ro_name== "画家"' @click="uploadWork">上传作品</el-dropdown-item>-->
        <!--<el-dropdown-item v-if='userInfo.ro_name== "画家"||userInfo.ro_name=="个人会员"'>我的喜欢</el-dropdown-item>-->
        <!--<el-dropdown-item divided @click.native="loginOut">退出登录</el-dropdown-item>-->
        <!--</el-dropdown-menu>-->
        <!--</el-dropdown>-->
        <!--</div>-->
        <!--<div v-else class="nav_right">-->
        <!--<el-menu-item index="5" @click="loginDialogFormVisible = true">登录</el-menu-item>-->
        <!--<el-menu-item index="6" @click="registerDialogFormVisible = true">注册</el-menu-item>-->
        <!--</div>-->
        <!--</el-menu>-->
        <!--</div>-->
        <NavMenu :navMenus="menuList"></NavMenu>
        <div class="line"></div>
        <el-dialog
                title="登录"
                :visible.sync="loginDialogFormVisible"
                width="30%"
                :aria-modal="true"
                :close-on-click-modal="false"
                center>
            <el-form :model="userLogin">
                <el-form-item label="账号">
                    <el-input v-model="userLogin.u_id" placeholder="请输入账号"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input placeholder="请输入密码" v-model="userLogin.u_pwd" show-password></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="loginDialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="login">登 录</el-button>
            </div>
            <el-link type="primary" @click="loginDialogFormVisible = false,registerDialogFormVisible=true">没有账号，前往注册
            </el-link>
        </el-dialog>
        <el-dialog
                title="注册"
                :visible.sync="registerDialogFormVisible"
                width="30%"
                :aria-modal="true"
                center>
            <el-form :model="userRegister">
                <el-form-item label="账号">
                    <el-input v-model="userRegister.u_id" placeholder="请输入账号"></el-input>
                </el-form-item>
                <el-form-item label="用户名">
                    <el-input v-model="userRegister.u_name" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input placeholder="请输入密码" v-model="userRegister.u_pwd" show-password></el-input>
                </el-form-item>
                <!--选择角色-->
                <template>
                    <el-radio v-model="userRegister.ro_id" label="3">个人会员</el-radio>
                    <el-radio v-model="userRegister.ro_id" label="2">画家</el-radio>
                </template>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="registerDialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="register">注 册</el-button>
            </div>
            <div style="padding-top: 10px">
                <el-link type="primary" @click="loginDialogFormVisible = true,registerDialogFormVisible=false">
                    已有账号，前往登录
                </el-link>
            </div>

        </el-dialog>
        <el-dialog
                :visible.sync="successDialogFormVisible"
                width="30%"
                :aria-modal="true"
                center>

            <span>注册成功</span>
            <div slot="footer" class="dialog-footer">
                <el-button @click="loginDialogFormVisible = true,successDialogFormVisible=false">去登录</el-button>
            </div>
        </el-dialog>
        <el-dialog
                title="上传作品"
                :visible.sync="uploadWorkDialogFormVisible"
                width="30%"
                :aria-modal="true"
                center>

            <el-form :model="work">
                <el-form-item label="作品名称">
                    <el-input v-model="work.work_name" placeholder="请输入作品名称"></el-input>
                </el-form-item>
                <el-form-item label="作品类型">
                    <el-input placeholder="请输入密码" v-model="userLogin.u_pwd" show-password></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="loginDialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="login">登 录</el-button>
            </div>
        </el-dialog>
        <!--路由匹配到的组件将显示在这里-->
        <router-view></router-view>
        <!--<router-view v-if="isRouterAlive"></router-view>-->
    </div>
</template>

<script>
    import NavMenu from "./components/NavMenu.vue";

    export default {
        name: 'app',
        components: {NavMenu: NavMenu},
        // provide () {    //父组件中通过provide来提供变量，在子组件中通过inject来注入变量。
        //     return {
        //         reload: this.reload
        //     }
        // },
        data() {
            return {
                menuList: null,
                // activeIndex: '1',
                // activeIndex2: '1',
                loginDialogFormVisible: false,
                registerDialogFormVisible: false,
                successDialogFormVisible: false,
                uploadWorkDialogFormVisible: false,
                roleRadio: 1,
                userLogin: {
                    u_id: '',
                    u_pwd: '',
                },
                userRegister: {
                    u_id: '',
                    u_name: '',
                    u_pwd: '',
                    ro_id: ''
                },
                work: {},
                size: "large",
                isLogin: false,
                userInfo: {
                    ro_id: '',
                    ro_name: '',
                    u_id: '',
                    u_name: '',
                    u_status: ''
                },

            };
        },
        computed: {
            activeIndex() {
                return this.$route.path.replace('/', '')
            }
        },
        methods: {
            getDataList() {
                axios.get("http://localhost:8089/safty/sys/list")
                    .then(res => {
                        if (res.data.success) {
                            // console.log(res.data.data);
                            this.menuList = res.data.data;
                            console.log(res.data.data);
                        }
                    })
                    .catch(err => {

                    })
            },
            // reload () {
            //     this.isRouterAlive = false;            //先关闭，
            //     this.$nextTick(function () {
            //         this.isRouterAlive = true;         //再打开
            //     })
            // },
            skip(a) {
                this.$router.push(a)
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            login() {
                //request：判断当前用户是否已登录，若已经登陆，提示用户已经登录，不能再次登录
                axios.post('http://localhost:8089/safty/login/userLogin', this.userLogin)
                    .then((res) => {
                        this.loginDialogFormVisible = false;
                        var result = res.data;
                        if (result.success) {
                            console.log(result);
                            this.userInfo = result.data;
                            window.sessionStorage.setItem("currUser", JSON.stringify(this.userInfo));
                            this.isLogin = result.loginSign;
                            //this.$store.commit("setuserInfo", this.userInfo);
                            //跳转页面
                            this.$router.push({path: '/'});
                            //this.reload();
                        }
                    })
                    .catch((err) => {
                        this.userLogin = {};
                        console.log(err.data);
                    })
            },
            loginOut() {
                axios.get("http://localhost:8089/safty/user/exit")
                    .then((res) => {
                        console.log(res.data)
                        this.userInfo = {};
                        this.isLogin = false;
                        window.sessionStorage.removeItem("currUser");
                    })
                    .catch((err) => {
                        console.log(err.data);
                    })
            },
            register() {
                axios.post('http://localhost:8089/safty/user/register', this.userRegister)
                    .then((res) => {
                        this.registerDialogFormVisible = false;
                        var result = res.data;
                        console.log(result);
                        if (result.success) {
                            //注册成功，弹框，去登陆
                            this.successDialogFormVisible = true;

                        }
                    })
                    .catch((err) => {
                        console.log(err.data);
                    })
            },
            uploadWork() {
                console.log("上传作品");
                this.$router.replace("/about");
            }
        },
        created() {
        },
        mounted() {
            this.getDataList();
            let currUser = JSON.parse(window.sessionStorage.getItem("currUser"));
            if (currUser != null) {
                this.userInfo = currUser;
                this.isLogin = true;
            }
            ;

        }
    }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }

    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }

    .el-icon-arrow-down {
        font-size: 12px;
    }

    .nav_right {
        display: flex;
        float: right;
        padding-right: 10px;

    }
</style>
